<template>
  <div class="m-[25px_15px] md:m-[25px_40px] xl:m-[50px]">
    <div class="flex items-baseline mb-[15px] xl:mb-[20px]">
      <h2 class="text-lg xl:text-[24px]">
        {{ title }}
      </h2>
      <strong class="ml-[10px] text-xs text-grey xl:text-sm">
        {{ imagesCount }}
      </strong>
    </div>

    <div class="flex flex-wrap mx-[-4px]">
      <ImagesItem
        v-for="(image, index) in images"
        :key="`image-${index}`"
        :image="image"
        :index="index"
        :type="type"
        class="w-[calc(100%/3)] p-1 md:w-[calc(100%/4)]  lg:w-[calc(100%/5)] xl:w-[calc(100%/6)] 2xl:w-[calc(100%/8)]"
        @openModal="openModal"
      />
    </div>

    <!-- <Modal
        v-if="modalVisible"
        :data="images"
        modifier="modal--images"
        aria-label="Images"
        nav
        :start-at="modalStartAt"
        @close="closeModal" /> -->
  </div>
</template>
<script setup>
import { apiImgUrl } from "@/api";
import ImagesItem from "./ImagesItem.vue";
import { ref, computed } from "vue";

const { title, type, images } = defineProps({
  title: {
    type: String,
    required: true,
  },

  type: {
    type: String,
    required: true,
  },

  images: {
    type: Array,
    required: true,
  },
});

const modalVisible = ref(false);
const modalStartAt = ref(0);

const imagesCount = computed(() => {
  return `${images.length} ${images.length > 1 ? "Images" : "Image"}`;
});

const handleData = () => {
  let thumb;

  if (type === "poster") {
    thumb = `${apiImgUrl}/w370_and_h556_bestv2`;
  } else {
    thumb = `${apiImgUrl}/w533_and_h300_bestv2`;
  }

  images.map((image) => {
    image.thumb = `${thumb}${image.file_path}`;
    image.src = `${apiImgUrl}/original${image.file_path}`;
  });
};

const openModal = (index) => {
  modalStartAt.value = index;
  modalVisible.value = true;
};

const closeModal = () => {
  modalVisible.value = false;
  modalStartAt.value = 0;
};

handleData();
</script>
